<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:of="http://omnifaces.org/functions">
    
    <h:head>
        <title>Thông tin người dùng</title>
        <style type="text/css">
                .ui-widget {
                    font-family: Tahoma;
                    font-size: 11px;
                }
        </style>
    </h:head>  
    <h:body>
        <h:outputStylesheet library="css" name="component.css"/>
        <f:metadata>
            <f:viewParam name="userId" value="#{userBean.userId}" />
            <f:event type="preRenderView" listener="#{userBean.preRenderDetailView()}" />
        </f:metadata>
        <h:form id="mainForm">
            <p:outputPanel rendered="#{userBean.user != null}">
                <p:messages id="msgs"/>
                
                <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content, ui-state-default labelCol, ui-widget-content" 
                             columns="4" cellpadding="5" width="100%">
                    <h:outputLabel for="username" style="display: inline; float: right; padding-right: 5px;" value="Tên đăng nhập" />  
                    <h:outputText value="#{userBean.user.username}" id="username"/>
                    
                    <h:outputLabel for="fullName" style="display: inline; float: right; padding-right: 5px;" value="Tên đầy đủ" />  
                    <h:outputText value="#{userBean.user.fullName}" id="fullName"/>
                    
                    <h:outputLabel for="activated" style="display: inline; float: right; padding-right: 5px;" value="Kích hoạt" />  
                    <h:outputText value="#{userBean.user.activated}" id="activated"/>
                    
                    <h:outputLabel for="dept" style="display: inline; float: right; padding-right: 5px;" value="Phòng ban" />
                    <h:outputText value="#{userBean.user.dept.name}" id="dept"/>
                    
                    <h:outputLabel for="title" style="display: inline; float: right; padding-right: 5px;" value="Chức danh" />  
                    <h:outputText value="#{userBean.user.title}" id="title"/>
                    
                    <h:outputLabel for="address" style="display: inline; float: right; padding-right: 5px;" value="Địa chỉ" />  
                    <h:outputText value="#{userBean.user.address}" id="address"/>
                    
                    <h:outputLabel for="email" style="display: inline; float: right; padding-right: 5px;" value="Email" />  
                    <h:outputText value="#{userBean.user.email}" id="email"/>
                    
                    <h:outputLabel for="phone" style="display: inline; float: right; padding-right: 5px;" value="Số điện thoại" />  
                    <h:outputText value="#{userBean.user.phone}" id="phone"/>
                    
                    <h:outputLabel for="mobile" style="display: inline; float: right; padding-right: 5px;" value="Di động" />  
                    <h:outputText value="#{userBean.user.mobile}" id="mobile"/>
                    
                    <h:outputLabel for="birthDate" style="display: inline; float: right; padding-right: 5px;" value="Ngày sinh" />
                    <h:outputText id="birthDate" value="#{of:formatDate(userBean.user.birthDate, 'dd/MM/yyyy')}"/>
                    
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Nhóm" />
                    <h:panelGroup>
                        <ui:repeat value="#{userBean.user.groups}" var="group">
                            <h:outputText value="[#{group.name}] "/>
                        </ui:repeat>
                    </h:panelGroup>
                </h:panelGrid>
            </p:outputPanel>
        </h:form>  
    </h:body>  
</html>
